<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css" />-->
		<!--<link rel="stylesheet" type="text/css" href="../../css/iconfont.css">-->
		<!--<script src="../../js/iconfont.js"></script>-->
	</head>

	<body>

		<style>
			body,.mui-content{
				background-color: #F9F9F9;
			}
			.titleText{
				text-align: center;
				font-family: '微软雅黑 Bold', '微软雅黑';
				font-weight: 700;
				font-style: normal;
				font-size: 16px;
			}
			.mui-title,header .mui-icon{
				color: #8cb33e;
			}
			.mui-icon{
				/*color: red;*/
			}
			.mui-icon:active{
				color: #8cb33e;
			}
			.mui-segmented-control.mui-scroll-wrapper {
				height: 65px;
			}
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			.mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
				color: white;
				border-bottom: 2px solid #007aff;
				background-color: #8cb33e;
				
			}
		</style>
		<!--标题栏-->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title titleText">我的订单</h1>
		</header>
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						未完成
					</a>
					<a class="mui-control-item" href="#item2mobile">
						已完成
					</a>
				</div>
				<div class="mui-slider-group" style="height: 790px;">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell mui-media-large">
										<a href="#">
										<img  id="hospital01" class="mui-media-object mui-pull-left" src="../img/user_1.png">
										<div class="mui-media-body" style=";">
											尹磊
											<span style="float: right;color:white;background-color: #F0AD4E;border: 1px solid #F9C370;padding: 0 5px;border-radius: 10px;">
													进行中
											</span>
											<p><span>订单编号:201812124574932448</span></p>
											<p class='mui-ellipsis'>客户电话:135****6653</p>
											<p class='mui-ellipsis'>
												<span>
													类型:图文问诊
												</span>
												<span>
													金额:399元
												</span>
											</p>
											<span style="float: right;">2018-12-12 15:20:44</span>
										</div>
										</a>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							无已完成订单
						</div>

					</div>
					<!--<div id="item3mobile" class="mui-slider-item mui-control-content">
						<div id="scroll3" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell mui-media-large">
										<a href="#">
										<img id="yd" class="mui-media-object mui-pull-left" src="../../img/yf.jpg">
										<div class="mui-media-body" style=";">
											老百姓大药房(武珞路店)...
											<p><span>支持医保   药房</span></p>
											<p class='mui-ellipsis'>武珞路558号</p>
											<span style="float: right;">3.2km</span>
										</div>
										</a>
									</li>
								</ul>
							</div>
						</div>

					</div>-->
				</div>
			</div>

		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: false
			});
			mui.ready(function() {
					mui('.mui-scroll-wrapper').scroll({
							bounce: true,
							indicators: true,
							deceleration:mui.os.ios?0.003:0.0009
					});
					mui('.mui-scroll').on('tap','.mui-control-item:not(.mui-active)',function(){
							mui('.mui-slider').slider().gotoItem(this.getAttribute('data-index'));
					});
			});
		</script>
	</body>

</html>